<template>
	<!-- goodlist商品列表 -->
	<view class="g_wp">
		<view class="g_nav">
			<image class="nav_title" src="../../static/logo.png" mode=""></image>
			<view class="nav_input">
				<input type="text" v-model="keywords" @confirm="searchTap" placeholder="搜索商品" />
				<text class="iconfont icon-sousuo"></text>
			</view>
			<view class="g_gouwuche" @click="$navTo('../cart/cart')">
				<text class="iconfont icon-gouwuche"></text>
				<view>
					购物车
				</view>
			</view>
			<view class="g_dingdan" @click="$navTo('../order/order')">
				<image src="../../static/dingdan.png" mode=""></image>
				<view>订单</view>
			</view>
		</view>
		<view class="g_tab" v-if="classList.length>0">
			<text :class="{'tab_active':classIdx==item.id}" v-for="item in classList" :key="item.id"
				@click="TabTap(item.id)">{{item.name}}</text>
		</view>
		<view class="g_body">
			<jswiper v-if="swiper.length>0" :Jinfo="swiper"></jswiper>
			<view class="g_list">
				<view class="list_item" v-for="item in list" :key="item.id"
					@click="$navTo('../product/product?id='+item.id)">
					<image :src="item.thumb" mode=""></image>
					<text class="list_title clamp">{{item.title}}</text>
					<view class="list_money">
						<text>{{item.agentprice-item.usecredit}}</text>
						<text>{{item.usecredit}}</text>
						<text>￥{{item.productprice}}</text>
					</view>
					<view class="list_button">立即购买</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
				<text v-if="isempty">没有更多了~</text>
			</view>
		</view>
		<bottom-tab />
	</view>
</template>

<script>
	import Jswiper from '@/components-home/pages/Jswiper.vue'
	import BottomTab from '@/components/bottomtab.vue';
	export default {
		components: {
			Jswiper,
			BottomTab
		},
		data() {
			return {
				issearch: false,
				keywords: '',
				swiper: [],
				classIdx: '',
				classList: [],
				page: 0,
				list: [],
				isempty: false,
				isloading: false,
			}
		},
		onReachBottom() {
			if (this.issearch) {
				this.searchList();
			} else {
				this.getList();
			}
		},
		onLoad(option) {
			this.classIdx = option.id ? option.id : '';
			this.getClass();
			this.getList();
		},
		methods: {
			searchTap() {
				if (this.keywords == '') {
					this.$api.msg('请输入搜索内容！');
					return;
				}
				this.classIdx = '';
				this.page = 0;
				this.list = [];
				this.swiper = [];
				this.issearch = true;
				this.searchList();
			},
			searchList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Lists/index', 'POST', 'shop', {
					keywords: this.keywords,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						let length = data.goods.length;
						this.list = this.list.concat(data.goods);
						this.isempty = length ? false : true;
					}
				})
			},
			TabTap(e) {
				if (e == this.classIdx) return;
				this.keywords = '';
				this.classIdx = e;
				this.issearch = false;
				this.page = 0;
				this.list = [];
				this.swiper = [];
				this.getList();
			},
			getClass() {
				this.$axios('home/homeclass', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.classList = res.data.data;
					}
				})
			},
			getList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('home/homegoods', 'POST', 'shop', {
					id: this.classIdx,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						if (data.banner.advtitle1 != '') {
							this.swiper.push({
								id: new Date() * 1,
								thumb: data.banner.advtitle1
							})
						}
						if (data.banner.advtitle2 != '') {
							this.swiper.push({
								id: new Date() * 2,
								thumb: data.banner.advtitle2
							})
						}
						if (data.banner.advtitle3 != '') {
							this.swiper.push({
								id: new Date() * 3,
								thumb: data.banner.advtitle3
							})
						}
						if (data.banner.advtitle4 != '') {
							this.swiper.push({
								id: new Date() * 4,
								thumb: data.banner.advtitle4
							})

						}
						let length = data.goodslist.length;
						this.list = this.list.concat(data.goodslist);
						this.isempty = length ? false : true;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/store/icon.css';

	page {
		background-color: #f2f2f2;
		font-size: $font-base;
		padding-bottom: 120upx;
	}

	.g_nav {
		background: $base-color;
		color: #fff;
		display: flex;
		align-items: center;
		padding: 10upx 20upx;
		position: fixed;
		width: 100%;
		z-index: 200;
	}

	.nav_title {
		height: 70upx;
		width: 70upx;
	}

	.nav_input {
		flex: 1;
		padding: 0 20upx;
		position: relative;
	}

	.nav_input input {
		background: #ffffff;
		border-radius: 30upx;
		color: $font-color-dark;
		padding: 0 20upx 0 60upx;
		height: 70upx;
		width: 100%;
	}

	.icon-sousuo {
		color: $font-color-dark;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 30upx;
	}

	.g_gouwuche {
		font-size: 22upx;
		text-align: center;
		width: 70upx;
	}

	.icon-gouwuche {
		font-size: 40upx;
		margin: 0 20upx 0 10upx;
	}

	.g_dingdan {
		text-align: center;
		font-size: 22upx;
		width: 70upx;
	}

	.g_dingdan image {
		height: 40upx;
		width: 40upx;
	}

	.g_tab {
		background: #f2f2f2;
		font-size: $font-lg;
		padding: 20upx 0;
		position: fixed;
		top: 86upx;
		overflow-x: scroll;
		width: 100%;
		white-space: nowrap;
		z-index: 200;
	}

	.g_tab text {
		display: inline-block;
		padding: 0 20upx;
	}

	.tab_active {
		font-weight: bold;
	}

	.g_body {
		padding: 170upx 20upx;
	}

	.list_item {
		background: #ffffff;
		border-radius: 15upx;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
		display: inline-block;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
		overflow: hidden;
		width: calc(50% - 12upx);
	}

	.list_item:nth-of-type(2n + 1) {
		margin-right: 20upx;
	}

	.list_item image {
		height: calc(50vw - 30upx);
		width: 100%;
	}

	.list_title {
		font-size: 30upx;
		font-weight: bold;
		overflow: hidden;
		padding: 10upx;
		white-space: nowrap;
	}

	.list_money {
		color: $base-color;
		font-size: 30upx;
		padding: 10upx;
	}

	.list_money text:nth-of-type(1)::before {
		content: '￥';
		font-size: $font-sm;
	}

	.list_money text:nth-of-type(2)::before {
		content: '+';
		font-size: $font-sm;
	}

	.list_money text:nth-of-type(2)::after {
		content: '米币';
		font-size: $font-sm;
	}

	.list_money text:nth-of-type(3) {
		font-size: $font-sm;
		padding-left: 20upx;
		text-decoration: line-through;
		color: $font-color-light;
	}

	.list_button {
		background: $base-color;
		border-radius: 10upx;
		color: #ffffff;
		margin: 10upx 10upx;
		text-align: center;
		padding: 10upx;
	}

	.empty_loading {
		text-align: center;
		color: #0066CC;
	}

	.empty_loading image {
		height: 60upx;
		width: 60upx;
	}
</style>
